<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>29晚练习</title>
	<style type="text/css">
	#main{
		width: 200px;
		height: 300px;
		/*background: gray;*/
	}
	
	#list{
		position: relative;
	}

	.caidan{
		width: 200px;
		height: 40px;
		margin-top:10px; 
		list-style: none;
		background: yellow;
		line-height: 40px;
	}

	.tan{
		width: 300px;
		height: 290px;
		background: green;
		position: absolute;
		left: 250px;
		top: 0px;
		display: none;
	}

	
	#kuang{
		width: 300px;
		height: 300px;
		background: #70811E;
	}
	
	.kuang_son{
		width: 300px;
		height: 80px;
		margin-top: 15px;
		background: #09F1D3;
	}
	</style>

	<script type="text/javascript">
	window.onload=function(){

		var caidan=document.getElementsByClassName("caidan");
		var tan=document.getElementsByClassName("tan");
		for (var i =0 ; i <caidan.length; i++) {
			caidan[i].onmouseover=function(){
				this.style.background="red";
				this.lastChild.style.display="block";
				};

			caidan[i].onmouseout=function(){
				this.style.background="yellow";
				this.lastChild.style,display="none";
				}
			}
			


			var kuang=document.getElementById("kuang");
			var kuang_son=document.getElementsByClassName("kuang_son");
			var jian=document.getElementsByClassName("jian");
				jian[0].onclick=function(){
					// kuang_son[1].style.background="red";
					kuang_son[0].innerHTML="今晚打老虎"；
				// kuang_son[2].style.display="none";
					// kuang.style.display="none";
				}



		




	}

	</script>
</head>
<body>
	<div id="main">
		<ul id="list">
			<li class="caidan">手机导航1 <div class="tan">米1</div></li>
			<li class="caidan">手机导航2 <div class="tan">米2</div></li>
			<li class="caidan">手机导航3 <div class="tan">米3</div></li>
			<li class="caidan">手机导航4 <div class="tan">米4</div></li>
			<li class="caidan">手机导航5 <div class="tan">米5</div></li>
			<li class="caidan">手机导航6 <div class="tan">米6</div></li>
		</ul>
	</div>


	<input type="button" value="大保健" class="jian">
	<div id="kuang">
		<div class="kuang_son">我是菜鸟，我怕谁</div>
		<div class="kuang_son"></div>
		<div class="kuang_son"></div>

	</div>
</body>
</html>